import { Bar, Pie, Line, Area } from '@ant-design/plots';
import React from 'react';

class Demo3 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      plotData: [],
      pieData: [],
      lineData: [],
      barData: [],
    };
  }

  componentDidMount() {
    this.getAppInfo();
  }

  getAppInfo = () => {
    let url = "http://1.94.134.166:8805/appUseInfo/state?beginDate=2024-01-01&endDate=2024-11-01&stateType=ByMonth";
    fetch(url, {
      method: "GET",
      headers: {
        'Content-Type': 'application/json',
        Authorization: localStorage.getItem('Authorization'),
      },
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data.data);
        if (data.data) {
          this.setState({
            plotData: data.data,
            pieData: this.formatPieData(data.data),
            lineData: this.formatLineData(data.data),
            barData: data.data,
          });
        }
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
  };

  formatPieData = (data) => {
    return data.map(item => ({
      type: item.appName,
      value: item.useTime
    }));
  };

  // 格式化折线图数据
  formatLineData = (data) => {
    const groupedData = {};
    data.forEach(item => {
      const key = `${item.appName}-${item.stateYear}-${item.stateMonth}`;
      if (!groupedData[key]) {
        groupedData[key] = { appName: item.appName, year: item.stateYear, month: item.stateMonth, useTime: 0 };
      }
      groupedData[key].useTime += parseInt(item.useTime);
    });
    return Object.values(groupedData);
  };



  //柱状图数据格式化
  formatBarData = (data) => {
    const groupedData = {};
    data.forEach(item => {
      const appName = item.appName;
      groupedData[appName] = (groupedData[appName] || 0) + parseInt(item.useTime);
    });
    const barData = Object.keys(groupedData).map(appName => ({
      appName: appName,
      useTime: groupedData[appName],
    }));
    console.log("Formatted barData: ", barData);
    return barData;
  };

  render() {
    const { plotData, pieData, lineData, barData } = this.state;

    // 条形图配置
    const plotConfig = {
      data: plotData,
      xField: 'appName',
      yField: 'useTime',
      seriesField: 'useTime',
      legend: { position: 'top-left' },
      label: {
        style: {
          fontWeight: 'bold',
          fill: '#4a4a4a',
        },
      },
      xAxis: {
        title: {
          text: '应用名称',
          style: { fontSize: 14, fontWeight: 'bold', fill: '#666' },
        },
        label: {
          style: { fontSize: 12, fill: '#555' },
        },
      },
      yAxis: {
        title: {
          text: '使用时间 (分钟)',
          style: { fontSize: 14, fontWeight: 'bold', fill: '#666' },
        },
        label: {
          style: { fontSize: 12, fill: '#555' },
        },
      },
      color: '#1890FF',
      style: {
        borderRadius: 5,
        shadowColor: '#888',
        shadowBlur: 10,
      },
    };

    // 饼图配置
    const pieConfig = {
      data: pieData,
      angleField: 'value',
      colorField: 'type',
      label: {
        type: 'inner',
        content: '{percentage}',
      },
      radius: 0.8,
      legend: {
        position: 'bottom',
      },
      style: {
        borderRadius: 10,
        shadowColor: '#888',
        shadowBlur: 10,
      },
    };

    // 折线图配置
    const lineConfig = {
      data: lineData,
      xField: 'month',
      yField: 'useTime',
      seriesField: 'appName',
      label: {
        style: {
          fontWeight: 'bold',
          fill: '#4a4a4a',
        },
      },
      interaction: {
        tooltip: {
          marker: false,
        },
      },
      style: {
        lineWidth: 3,
        stroke: '#FF6347',
      },
      xAxis: {
        title: {
          text: '月份',
          style: { fontSize: 14, fontWeight: 'bold', fill: '#666' },
        },
        label: {
          style: { fontSize: 12, fill: '#555' },
        },
      },
      yAxis: {
        title: {
          text: '使用时间 (分钟)',
          style: { fontSize: 14, fontWeight: 'bold', fill: '#666' },
        },
        label: {
          style: { fontSize: 12, fill: '#555' },
        },
      },
    };

    // 柱状图配置
    const barConfig = {
      data: barData,
      xField: 'appName',
      yField: 'useTime',
      label: {
        style: {
          fontWeight: 'bold',
          fill: '#4a4a4a',
        },
      },
      legend: {
        position: 'top-left',
      },
      colorField: 'appName',
      xAxis: {
        title: {
          text: '应用名称',  // 为X轴添加标题
          style: { fontSize: 14, fontWeight: 'bold', fill: '#666' },
        },
        label: {
          style: { fontSize: 12, fill: '#555' },
        },
      },
      yAxis: {
        title: {
          text: '使用时间 (分钟)',  // 为Y轴添加标题
          style: { fontSize: 14, fontWeight: 'bold', fill: '#666' },
        },
        label: {
          style: { fontSize: 12, fill: '#555' },
        },
      },
      color: '#52C41A',  // 为柱状图指定颜色
      style: {
        borderRadius: 5,
        shadowColor: '#888',
        shadowBlur: 10,
      },
    };

    return (
      <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
        <h1 style={{ textAlign: 'center', marginBottom: '20px', color: '#333' }}>应用使用情况分析</h1>

        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '30px' }}>
          <div style={{ width: '48%' }}>
            <Bar {...plotConfig} />
          </div>
          <div style={{ width: '48%' }}>
            <Pie {...pieConfig} />
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div style={{ width: '48%' }}>
            <Bar {...barConfig} />
          </div>
          <div style={{ width: '48%' }}>
            <Line {...lineConfig} />
          </div>
        </div>
      </div>
    );
  }
}

export default Demo3;
